<template>
    <div :style="fontStyle">
        <slot></slot>
        <div class="rate" @mouseout="mouseOut">
            <div class="solid">
                <span 
                    v-for="num in 5"
                    :key="num"
                    @mouseover="mouseOver(num)"
                >☆</span>
            </div>
            <div class="hollow" :style="fontWidth">
                <span
                    v-for="num in 5"
                    :key="num"
                    @mouseover="mouseOver(num)"
                    @click="onRate(num)"
                >★</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue'

let props = defineProps({
    modelValue: Number,
    theme: {
        type: String,
        default: 'orange'
    }
})
let emits = defineEmits(['update:modelValue'])

const ThemeObj = {
    black: '#000',
    white: '#fff',
    red: '#f5222d',
    orange: '#fa541c',
    yellow: '#fadb14',
    green: '#73d13d',
    blue: '#40a9ff'
}
let fontStyle = computed(() => ({
    color: ThemeObj[props.theme],
}))

let width = ref(props.modelValue)
const fontWidth = computed(() => `width:${width.value}em`)

function mouseOver(num) {
    width.value = num
}
function mouseOut() {
    width.value = props.modelValue
}
function onRate(num) {
    width.value = num
    emits("update:modelValue", num)
}
</script>

<style lang="less" scoped>
.rate {
    position: relative;
    display: inline-block;
    cursor: pointer;
    font-size: 60px;

    span {
        display: inline-block;
        width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
    }

    > div {
        overflow: hidden;
        white-space: nowrap;
    }

    .hollow {
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
    }
}
</style>